<template>
  <div class="buttonTableRole">
    <el-dialog @opened="$store.commit('dialogTop')" title="权限管理" :visible.sync="dialogFormVisibleAdd"
               @open="dialigOpen()" @close="dialigClose()">
      <el-tree
        ref="tree"
        :data="rows"
        show-checkbox
        @node-expand="handleNodeClick"
        node-key="menuId"
        accordion
        :highlight-current="false"
        :props="defaultProps">
      </el-tree>
      <div class="subTable">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: [],
    data () {
      return {
//        树形列表
        menuIdList: [],
        data1: [],
        data0: [],
        defaultProps: {
          children: 'childValues',
          label: 'menuName'
        },
        //关联角色
        rows: [],
        count: "",
        roleId: "",
        multipleSelection: [],
        checked: [],
        roleChecked: [],
        dialogFormVisibleAdd: false,
      }
    },
    created(){

    },
    mounted(){

    },
    methods: {
      handleNodeClick(data) {
        setTimeout(()=>{
          this.$store.commit('dialogTop')
        },500)
      },
      dialogOpen(row){
        this.roleId = row.roleId
        this.dialogFormVisibleAdd = true
      },
      getCheckedKeys() {
//        this.menuIdList = this.$refs.tree.getCheckedKeys() //只有已选中
        let arr = []
        this.$refs.tree.getCheckedNodes(false, true).forEach(item => {
          arr.push(item.menuId)
        })
        this.menuIdList = arr
      },
      //打开对话框
      dialigOpen(){
        this.data1 = []
        //查询所有角色
        this.axios.post(process.env.API_HOST + "/system/selectSystemMenuTree", {})
          .then(response => {
            const result = response.data
            if (response.data.code === 200) {
              this.rows = result.result
              this.getSelectRoleMenu()
            }
          })
      },
      getSelectRoleMenu(){
        this.axios.post(process.env.API_HOST + "/system/selectRoleMenu", {roleId: this.roleId})
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              // 只需要将子菜单ID添加进去即可
              result.result.forEach(item => {
                this.data0.push(item.menuId)
              })
              let ids=[]
              this.rows.forEach(item=>{
                if(item.childValues.length==0){
                  if(this.data0.includes(item.menuId)){
                    ids.push(item.menuId)
                  }
                }else{                  
                  if(item.menuId!=1){
                    item.childValues.forEach(item1=>{
                      if(item1.childValues.length==0){
                        if(this.data0.includes(item1.menuId)){
                          ids.push(item1.menuId)
                        }
                      }else{
                        item1.childValues.forEach(item2=>{
                          if(this.data0.includes(item2.menuId)){
                            ids.push(item2.menuId)
                          }
                        })
                      }                      
                    })
                  }
                }
              })
              setTimeout(()=>{
                this.data1 = ids
                this.$refs.tree.setCheckedKeys(this.data1)
              },100)
            }
          })
      },
      //关闭对话框
      dialigClose(){
        this.data0 = []
        this.data1 = []
        this.menuIdList = []

      },
//    提交后回调
      submitForm() {
        this.getCheckedKeys()
        this.axios.post(process.env.API_HOST + `/system/insertRoleMenu`, {roleId: this.roleId,menuIdList:this.menuIdList})
          .then(response => {
            if (response.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.dialogFormVisibleAdd = false
            }
          })
          .catch(error => {
            console.log(error);
          });

      },
//      重置选择
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .buttonTableRole
    display inline-block
    margin-right 8px
    .subTable
      margin-top 20px
      text-align center


</style>
